<script setup lang="ts">
import classes from '../PageEditor.module.css'

defineProps(['viewNodes'])
</script>

<template>
  <!-- 地图不展开报错 -->
  <ElCollapse v-once :model-value="['1', '3']" :class="classes['views']">
    <ElCollapseItem name="1">
      <template #title>
        <ElText :class="classes['views-title']" tag="b"> 布局 </ElText>
      </template>
      <div :class="classes['views-container']">
        <template v-for="viewNode of viewNodes" :key="viewNode.uuid">
          <component :is="viewNode.view" v-if="viewNode.isLayoutNode"></component>
        </template>
      </div>
    </ElCollapseItem>
    <ElCollapseItem name="2">
      <template #title>
        <ElText :class="classes['views-title']" tag="b"> 表单 </ElText>
      </template>
      <div :class="classes['views-container']">
        <template v-for="viewNode of viewNodes" :key="viewNode.uuid">
          <component :is="viewNode.view" v-if="viewNode.isFormNode"></component>
        </template>
      </div>
    </ElCollapseItem>
    <ElCollapseItem name="3">
      <template #title>
        <ElText :class="classes['views-title']" tag="b"> 图表 </ElText>
      </template>
      <div :class="classes['views-container']">
        <template v-for="viewNode of viewNodes" :key="viewNode.uuid">
          <component :is="viewNode.view" v-if="viewNode.isChartNode"></component>
        </template>
      </div>
    </ElCollapseItem>
    <ElCollapseItem name="4">
      <template #title>
        <ElText :class="classes['views-title']" tag="b"> 数据展示 </ElText>
      </template>
      <div :class="classes['views-container']">
        <template v-for="viewNode of viewNodes" :key="viewNode.uuid">
          <component :is="viewNode.view" v-if="viewNode.isDataDisplayNode"></component>
        </template>
      </div>
    </ElCollapseItem>
    <ElCollapseItem name="5">
      <template #title>
        <ElText :class="classes['views-title']" tag="b"> 导航 </ElText>
      </template>
      <div :class="classes['views-container']">
        <template v-for="viewNode of viewNodes" :key="viewNode.uuid">
          <component :is="viewNode.view" v-if="viewNode.isNavigationNode"></component>
        </template>
      </div>
    </ElCollapseItem>
    <ElCollapseItem name="6">
      <template #title>
        <ElText :class="classes['views-title']" tag="b"> 3D </ElText>
      </template>
      <div :class="classes['views-container']">
        <template v-for="viewNode of viewNodes" :key="viewNode.uuid">
          <component :is="viewNode.view" v-if="viewNode.is3DNode"></component>
        </template>
      </div>
    </ElCollapseItem>
    <ElCollapseItem name="7">
      <template #title>
        <ElText :class="classes['views-title']" tag="b"> 公共组件 </ElText>
      </template>
      <div :class="classes['views-container']">
        <template v-for="viewNode of viewNodes" :key="viewNode.uuid">
          <component :is="viewNode.view" v-if="viewNode.isCommonNode"></component>
        </template>
      </div>
    </ElCollapseItem>
    <ElCollapseItem name="8">
      <template #title>
        <ElText :class="classes['views-title']" tag="b"> 自定义组件 </ElText>
      </template>
      <div :class="classes['views-container']">
        <template v-for="viewNode of viewNodes" :key="viewNode.uuid">
          <component :is="viewNode.view" v-if="viewNode.isCustomNode"></component>
        </template>
      </div>
    </ElCollapseItem>
  </ElCollapse>
</template>

<style scoped></style>
